<html>

<body>
    <script src="https://unpkg.com/vue@next/dist/vue.js"></script>
    <script src="dist/vue-observe-visibility.js"></script>

    <div id="app">
      <button @click="show = !show">Toggle</button>
      <label>
        <input type="checkbox" v-model="isVisible" disabled/> Is visible?
      </label>
      <div ref="test" v-show="show" v-observe-visibility="visibilityChanged">Hello world!</div>
    </div>


    <script>
      // App
      new Vue({
        el: '#app',
        data: {
          show: true,
          isVisible: true
        },
        methods: {
          visibilityChanged: function(isVisible) {
              this.isVisible = isVisible
          }
        }
      })
    </script>
</body>

</html>
